<template>
	<!-- 弹窗组件 -->
	<!-- 判断是否显示 -->
	<div class="popUp" v-if="props.isShowInf.isShow">
		<!-- 遮罩层 -->
		<div class="Mask"></div>
		<!-- 新增或编辑弹窗 -->
		<div v-if="props.isShowInf.type==1" class="wind" style="width: 45vw;overflow: auto;">
			<!-- 头部标题 -->
			<div class="header">
				<div class="ti">
					{{props.isShowInf.isAdd?'新增':'编辑'}}{{props.isShowInf.pageInf.name+'单'}}
				</div>
				<!-- 关闭弹窗按钮 -->
				<div class="cel" @click="close">

				</div>
			</div>
			<!-- 弹窗输入主体 -->
			<div class="cont">
				<!-- li:指具有相同性质的项目 -->
				<div class="li">
					<div class="ti">工程编码:</div>
					<div class="val">{{fromData.list[pageNum-1].fBillno}}</div>
				</div>
				<div class="li">
					<div class="ti">项目名称:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fProjectName}}
					</div>
				</div>
				<div class="li">
					<div class="ti">小区名称:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fCommunityName}}
					</div>
				</div>
				<div class="li">
					<div class="ti">项目地址:</div>
					<div class="val" style="width: 88%;">
						{{fromData.list[pageNum-1].fProjectAddr}}
					</div>
				</div>
				<div class="li">
					<div class="ti">下单户数:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fOrderNum}}
					</div>
				</div>
				<div class="li">
					<div class="ti">客户名称:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fClientNameName}}
					</div>
				</div>
				<div class="li">
					<div class="ti">表类型:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fSetupMode}}
					</div>
				</div>
				<div class="li">
					<div class="ti">实际开始时间:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fRealStartTime}}
					</div>
				</div>
				<div class="li">
					<div class="ti">实际结束时间:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fRealEndTime}}
					</div>
				</div>
				<div class="li">
					<div class="ti">施工人员:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fWorkorderOperationsWoopWcpIdName}}
					</div>
				</div>
				<div class="li">
					<div class="ti">内验提交人:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fInsideName}}
					</div>
				</div>
				<div class="li">
					<div class="ti">内验完成时间:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fCompleteTime}}
					</div>
				</div>
				<div class="li">
					<div class="ti">移交户数:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fTurnNumber}}
					</div>
				</div>
				<div class="li">
					<div class="ti">申请投运数量:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fApplyNumber}}
					</div>
				</div>
				<div class="li">
					<div class="ti">已投运数:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fTransportNumber}}
					</div>
				</div>
				<div class="li">
					<div class="ti">投运状态:</div>
					<div class="val">{{(fromData.list[pageNum-1].fTransportState==0)?'未投运':((fromData.list[pageNum-1].fTransportState==10)?'已投运':'已关闭')}}</div>
				</div>
				<div class="li">
					<div class="ti">提交人:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fTransportUser}}
					</div>
				</div>
				<div class="li">
					<div class="ti">审核人ID:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fAuditUserId}}
					</div>
				</div>
				<div class="li">
					<div class="ti">审核状态:</div>
					<div class="val">{{['草稿','审核中','作废','审核通过'][(fromData.list[pageNum-1].fState)/10]}}</div>
				</div>
				<div class="li">
					<div class="ti">审核时间:</div>
					<div class="val">
						{{fromData.list[pageNum-1].fAuditorTime}}
					</div>
				</div>
				<div class="li">
					<div class="ti">备注:</div>
					<div class="val" style="width: 88%;">
						{{fromData.list[pageNum-1].fRemark}}
					</div>
				</div>
				<div class="liAdd">
					<div class="li">
						<div class="ti">片区名称:</div>
						<el-select v-model="fromData.list[pageNum-1].fAreaName" filterable placeholder="Select">
							<el-option v-for="item in area.areaList" :key="item.fId" :label="item.fArea" :value="item.fArea" />
						</el-select>
					</div>
					<div class="li">
						<div class="ti">起始时间:</div>
						<input type="date" v-model="fromData.list[pageNum-1].fStatStartTime" />
					</div>
					<div class="li">
						<div class="ti">维护人员:</div>
						<el-select v-model="fromData.list[pageNum-1].fPreservePeople" filterable placeholder="Select">
							<el-option v-for="item in personnel.personnelList" :key="item.fUserId" :label="item.fUserName" :value="item.fUserName" />
						</el-select>
					</div>
				</div>
			</div>
			<!-- 弹窗底部 -->
			<div class="formFoot">
				<div class="left" style="width: 30rem;">
		<!-- 			<div class="start" @click="chanPage(0)">
						首个
					</div>
					<div class="last" @click="chanPage(1)">
						上一个
					</div> -->
					<div class="page" style="display: flex;justify-content: space-around;align-items: center;">
						第
						<div class="pageNum" style="width: 100%;height: 100%;line-height: 1.5625rem;">
							<!-- <input @click="selectPageText" @blur="checkPageNum" id="pageNum" type="text" v-model="pageNum"/> -->
							{{pageNum}}
						</div>
						页
					</div>
		<!-- 			<div class="next" @click="chanPage(2)">
						下一个
					</div>
					<div class="end" @click="chanPage(3)">
						末尾
					</div> -->
				</div>
				<div class="rit">
					<button type="button" @click="(fromData.list[pageNum-1].fState!=0)?'':(Sh())" v-if="!props.isShowInf.isAdd">{{(fromData.list[pageNum-1].fState==0)?'审核':'已审核'}}</button>
					<button type="button" @click="close">取消</button>
					<button type="button" @click="upData">提交当前</button>
				</div>
			</div>
		</div>
		<!-- 删除提醒弹窗 -->
		<div class="msg" v-if="props.isShowInf.type==2">
			<div class="header">
				<div></div>
				<div class="cel" @click="close">X</div>
			</div>
			<div class="cont">
				是否删除此条{{props.isShowInf.pageInf.name}}单信息？
			</div>
			<div class="function">
				<button type="button" @click="close">取消</button>
				<button type="button" @click="delet">确认</button>
			</div>
		</div>
		<!-- 添加第一级弹窗 -->
		<div class="addFormData" v-if="props.isShowInf.type==0">
			<!-- 头部标题 -->
			<div class="header">
				<div class="ti">
					{{props.isShowInf.pageInf.popup}}
				</div>
				<!-- 关闭窗口按钮 -->
				<div class="cel" @click="close">X</div>
			</div>
			<!-- 数据查询条件 -->
			<div class="head">
				<div class="li">
					<div class="ti">项目号:</div>
					<input type="text" v-model.trim="selectInput.digi_project_digi_worknum">
				</div>
				<div class="li">
					<div class="ti">工单号:</div>
					<input type="text" v-model.trim="selectInput.billno">
				</div>
				<div class="li">
					<div class="ti">项目名称:</div>
					<input type="text" v-model.trim="selectInput.digi_project_name">
				</div>
				<div class="li">
					<button type="button" @click="select">查询</button>
					<button type="button" @click="clear">重置</button>
				</div>
			</div>
			<!-- 查询显示表格 -->
			<div class="table" :style="((table.data.length)==0)?'padding-bottom: 1.2rem;':''">
				<el-table @selection-change='selectData'  :data="table.data" height="320" style="width: 100%" border>
					<el-table-column type="selection" width="50" />
					<el-table-column :fixed="(index==0)?true:false"  :label="item.ti" :width="(item.ti.length>4)?'140':'110'"   v-for="(item,index) in tableHeaderList" :prop="item.value" />
				</el-table>
			</div>
			<!-- <paging @page="pageInf" :pageMax='table.pageNum' v-show="(table.data.length)!=0"></paging> -->
			<!-- 弹窗底部 -->
			<div class="foot">
				<div class="li">
					<div class="ti">所属片区:</div>
					<el-select v-model="area.nowSelect" filterable placeholder="Select">
						<el-option v-for="item,index in area.areaList" :key="item.fId" :label="item.fArea" :value="index" />
					</el-select>
				</div>
				<div class="li">
					<div class="ti">维护人员:</div>
					<el-select v-model="personnel.nowSelect" filterable placeholder="Select">
						<el-option v-for="item,index in personnel.personnelList" :key="item.fUserId" :label="item.fUserName" :value="index" />
					</el-select>
				</div>
				<div class="li">
					<div class="ti">工作统计起始年月:</div>
					<input type="date" v-model="date" />
				</div>
			</div>
			<!-- 弹窗末尾 -->
			<div class="footer">
				<button type="button" @click="chanPopupType">确认</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive,onMounted,defineExpose,defineProps,defineEmits,watch   } from 'vue'
	import { ElMessage } from 'element-plus'
	import tableHeader from '../../../public/JavaScript/management/waybill.js'
	import data from '../../../public/JavaScript/management/data.js'
	import ajax from '../../../public/JavaScript/api/ajax.js'
	import paging from '../Paging'
	/* 表头列表 */
	let tableHeaderList=reactive([])
	/* 表格数据 */
	let table=reactive({
		data:[],
		pageNum:1
	})
	let area =reactive({
		areaList:[],
		nowSelect:null
	})
	let personnel =reactive({
		personnelList:[],
		nowSelect:null
	})
	let addOrb=ref(true)
	onMounted(()=>{
		/* 给表头赋值 */
		// console.log(props.isShowInf.pageInf.innerSurface)
			tableHeaderList=props.isShowInf.pageInf.innerSurface
		if(props.isShowInf.isAdd){
			addOrb.value=false
		}else{
			addOrb.value=true
		}
			/* 监听键盘左右健翻页事件 */
		window.addEventListener('keyup',e=>{
			/* 判断弹窗是否显示 */
			if(props.isShowInf.isShow){
				/* 判断是否按下键盘左键 */
				if(e.keyCode==37){
					chanPage(1)
				}else if(e.keyCode==39){
					chanPage(2)
				}
			}
		})

		ajax.post2('/qj-area/selectArea',{},res=>{
			area.areaList=res.data
		})
		ajax.post2('/qj-user/selectUser',{},res=>{
			personnel.personnelList=res.data
		})


	})
	let props=defineProps({
		/* 接收弹窗类型，是否显示，新增或编辑 */
		isShowInf:{
			default:false
		},
		/* 关闭窗口事件 */
		close:{
			type:Function
		},
		api:{}
	})
	/* 改变弹窗类型 */
	let emit=defineEmits(['chan','newData'])
	let fromData=reactive({
		list:[],
		oldList:[]
	})
	function chanPopupType(){
		let arr=[]
		if(area.nowSelect==null){
			ElMessage.error('所属片区不能为空！')
		}else if(personnel.nowSelect==null){
			ElMessage.error('维护人员不能为空！')
		}else if(date.value==null){
			ElMessage.error('起始年月不能为空！')
		}else{
			for(let i in selectDataList.list){
				console.log(selectDataList.list[i])
				arr.push({
					"fBillno": selectDataList.list[i].fBillno,
					"fProjectWorknum": selectDataList.list[i].fProjectWorknum,
					"fStatStartTime": date.value,
					"fAreaName": area.areaList[area.nowSelect].fArea,
					"fPreservePeople": personnel.personnelList[personnel.nowSelect].fUserName,
					"fAreaFId":area.areaList[area.nowSelect].fId,
					"fPreservePeopleFId":personnel.personnelList[personnel.nowSelect].fUserId
				})
			}
			ajax.post('/qj-transport/insert',{
				body:arr
			},res=>{
				console.log('8888',res)
				if(res.code==200){
					fromData.list=res.data
					fromData.oldList=res.data
					/* 弹窗页数初始化 */
					pageNum.value=1
					/* 向外抛改变弹窗类型对象 */
					table.data=[]
					emit('chan',null,null,1,true)
					console.log('哈哈哈哈',res,arr)
				}else{
					ElMessage.error('系统错误！')
				}

			})
		}
	}
	let selectInput=reactive({
	  "billno": "",
	  "digi_project_digi_worknum": "",
	  "digi_project_name": "",
		pageSize:'',
		page:''
	})
	function clear(){
		for(let i in selectInput){
			selectInput[i]=""
		}
	}
	function pageInf(pagesize,page){
		selectInput.pageSize=pagesize
		selectInput.page=page
		if(selectInput.digi_project_digi_worknum=='' && selectInput.digi_project_name=='' && selectInput.billno==''){
			ElMessage.error('查询条件不能为空！')
		}else{
			ajax.post(props.api.UnturnedOperation,{
				body:selectInput
			},res=>{
				table.data=res.data
				console.log(res.data)
			})
		}

	}
	function select(){
		console.log('运行了查询')
		if(selectInput.digi_project_digi_worknum=='' && selectInput.digi_project_name=='' && selectInput.billno==''){
			ElMessage.error('查询条件不能为空！')
		}else{
			/* 给表格数据赋值 */
			// table=data.UnturnedOperationData.tableData
			console.log(props.api.page)
			// UnturnedOperation
			ajax.post(props.api.UnturnedOperation,{
				body:selectInput
			},res=>{
				console.log(res)
				table.data=res.data || []
				// table.pageNum=res.data?.totalPages || 1
				console.log(res.data)
			})
		}

	}

	/* 选择时间 */
	let date=ref(null)
	/* 当前创建表单页数 */
	let pageNum=ref(1)
	/* 改变表单页数 */
	function chanPage(type){
		switch(type){
			case 0:		//首页
				pageNum.value=1
			break;
			case 1:		//上翻页
				if(pageNum.value>1){
					pageNum.value--
				}
			break;
			case 2:		//下翻页
			if(pageNum.value<fromData.list.length){
				pageNum.value++
			}
			break;
			case 3:		//尾页
				pageNum.value=fromData.list.length
			break;
			default:
			break;
		}
	}
	/* 监听页数变化是否符合规范 */
	watch(pageNum,()=>{
		if(pageNum.value>0 && pageNum.value<=fromData.list.length || pageNum.value==''){

		}else{
			pageNum.value=1		//不规范变为1
		}
	})
	watch(()=>{props.isShowInf.data},()=>{
		console.log(1)
		fromData.list=[]
		fromData.list.push(props.isShowInf.data)
	},{deep:true})
	/* 监听弹窗是否显示，初始化页数 */
	watch(()=>{props.isShowInf.isShow},()=>{
		pageNum.value=1
	},{deep:true})
	/* 单击页数输入框选中页数 */
	function selectPageText(selectElement)
	{
		document.querySelectorAll('#pageNum')[0].select()
	}
	/* 失去焦点时检查页数是否为空 */
	function checkPageNum(){
		if(pageNum.value==''){		//为空页数变1
			pageNum.value=1
		}
	}
	let selectDataList=reactive({
		list:[]
	})
	function selectData(ev){
		selectDataList.list=ev
		console.log(ev)
	}
	function upData(){
		if(fromData.list.length==1){

			ajax.post('/qj-transport/update',{
					body:{
						  "fAreaFId": fromData.list[pageNum.value-1].fAreaFId,
						  "fAreaName": fromData.list[pageNum.value-1].fAreaName,
						  "fId": fromData.list[pageNum.value-1].fId,
						  "fPreservePeople": fromData.list[pageNum.value-1].fPreservePeople,
						  "fPreservePeopleFId": fromData.list[pageNum.value-1].fPreservePeopleFId,
						  "fProjectWorknum": fromData.list[pageNum.value-1].fProjectWorknum,
						  "fStatStartTime": fromData.list[pageNum.value-1].fStatStartTime
					}
			},res=>{
				if(res.code==200){
					props.close()
					ElMessage.success('提交成功！')
					fromData.list.splice(pageNum.value,1)
				}else{
					ElMessage.error('提交失败,请检查数据是否完整！')
				}
			})
		}else{
			console.log(fromData.list[pageNum.value])
			ajax.post('/qj-transport/update',{
					body:{
						  "fAreaFId": fromData.list[pageNum.value-1].fAreaFId,
						  "fAreaName": fromData.list[pageNum.value-1].fAreaName,
						  "fId": fromData.list[pageNum.value-1].fId,
						  "fPreservePeople": fromData.list[pageNum.value-1].fPreservePeople,
						  "fPreservePeopleFId": fromData.list[pageNum.value-1].fPreservePeopleFId,
						  "fProjectWorknum": fromData.list[pageNum.value-1].fProjectWorknum,
						  "fStatStartTime": fromData.list[pageNum.value-1].fStatStartTime
					}
			},res=>{
				console.log(res)
				if(res.data!=0){
					ElMessage.success('提交成功！')
					chanPage(2)
				}else{
					ElMessage.error('提交失败,请检查数据是否完整！')
				}
			})
		}
	}
	function Sh(){
		ajax.post('/qj-transport/updateFState',{
			body:fromData.list[(props.isShowInf.isAdd)?(pageNum-1):(0)]
		},res=>{
			if(res.code==200){
				ElMessage.success('审核成功！')
				props.close()
			}else{
				ElMessage.error('审核失败！')
			}
		})

	}
	function delet(){
		if(props.isShowInf.data.fTransportState!=10){
			ajax.post('/qj-transport/delete/'+props.isShowInf.data.fId,{},res=>{
				if(res.data==0){
					ElMessage.error('删除失败！')
				}else{
					ElMessage.success('删除成功！')
					props.close()
					emit('newData')
					table.data=[]
				}
			})
		}else{
			ElMessage.error('已投运不能删除！')
		}
	}

</script>

<style lang="less" scoped="scoped">
	@import 'index.less';
</style>
